<template>
  <div>
    <el-card>
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="searchData.name" placeholder="请输入名称" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" :icon="Search" @click="initData">搜索</el-button>
            <el-button size="small" :icon="Refresh" @click="reSearchData">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button size="small" type="primary" :icon="Plus" @click="showDialog" plain>新增</el-button>
<!--        <el-button size="small" type="success" :icon="Edit" plain>修改</el-button>-->
        <el-button size="small" type="danger" :icon="Delete" plain @click="delUnit">批量删除</el-button>
      </div>
      <div style="margin-top: 10px">
        <el-table :data="unit.unitList" style="width: 100%" @selection-change="tableChange">
          <el-table-column type="selection" width="55"/>
          <el-table-column label="名称" property="name" width="200"/>
          <el-table-column label="创建时间" property="createTime"/>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button size="small" type="primary" text :icon="Edit" @click="reShowUnit(scope.row)">修改
              </el-button>
              <el-button size="small" type="danger" text :icon="Delete" @click="delUnit(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <pagination
            v-show="searchData.total > 0"
            :total="searchData.total"
            v-model:page="searchData.pageNum"
            v-model:limit="searchData.pageSize"
            @pagination="initData"/>
      </template>
    </el-card>

    <!--默认隐藏对话框-->
    <el-dialog v-model="dialogFormVisible" :title="title" width="500">
      <el-form :model="unitData" :rules="myRules" ref="addOrUpdateForm">
        <el-form-item label="单位名称" prop="name">
          <el-input v-model="unitData.name" placeholder="请输入单位名称" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
          <el-button type="success" @click="addOrUpdate()">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {Refresh, Delete, Plus, Edit, Search} from '@element-plus/icons-vue'
import {listUnits, saveOrUpdateUnit, delUnits} from "@/api/product/unit.js";
import {unitPinia} from "@/store/product/unitPinia.js";
import {reactive, ref, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
//查询条件
let searchData = reactive({
  name: '',
  pageNum: 1,
  pageSize: 4,
  total: 0
})
let unit = unitPinia()
//条件查询数据信息
let initData = async () => {
  let {rows, total} = await listUnits(searchData)
  unit.unitList = rows
  searchData.total = total
}
//页面挂载完毕，直接执行的方法
onMounted(() => {
  initData()
})
//重置
let reSearchData = () => {
  searchData.name = ''
  searchData.pageNum = 1
  searchData.pageSize = 2
  searchData.total = 0
  initData()
}
//删除
let ids = ref([])
//选中数据
let tableChange = (val) => {
  ids.value = val.map(item => item.id)
}
let delUnit = async (row) => {
  let unitIds = row.id || ids.value
  ElMessageBox.confirm("是否删除该数据?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(async () => {
    try {
      await delUnits(unitIds)
      ElMessage.success('删除成功')
      await initData()
    } catch (e) {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.warning('取消删除')
  })
}
//新增或修改  数据
let unitData = reactive({
  id: 0,
  name: ''
})
//新增或修改  弹框(默认不弹出)
let dialogFormVisible = ref(false)
let title = ref()
//定义规则
let myRules = reactive({
  name: [
    {required: true, message: '单位名称不能为空', trigger: 'blur'}
  ]
})
//定义表单
let addOrUpdateForm = ref()
//弹框弹出的方法
let showDialog = () => {
  dialogFormVisible.value = true
  clearDialog()
  title.value = '新增商品单位'
}
//清空弹框内容的方法
let clearDialog = () => {
  unitData.name = ''
}
//新增或修改的方法
let addOrUpdate = async () => {
  addOrUpdateForm.value.validate
  try {
    await saveOrUpdateUnit(unitData)
    ElMessage.success(unitData.id == null ? '添加单位成功' : '修改单位成功')
    dialogFormVisible.value = false
    await initData()
  } catch (e) {
    ElMessage.error(unitData.id == null ? '添加单位失败' : '修改单位失败')
  }
}
//回显
let reShowUnit = (row) => {
  dialogFormVisible.value = true
  title.value = '修改商品单位'
  Object.assign(unitData, row)
}
</script>

<style scoped>

</style>